<%@ taglib prefix="v-bind" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: YeWenting
  Date: 2017/9/3
  Time: 18:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="UTF-8">
    <title>Sign Up Login</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>

<body>

<div class="cotn_principal">
    <div class="cont_centrar">
        <div class="cont_login">
            <div class="cont_info_log_sign_up">
                <div class="col_md_login">
                    <div class="cont_ba_opcitiy">
                        <h2>LOGIN</h2>
                        <p>Login to my account</p>
                        <button class="btn_login" onClick="cambiar_login()">LOGIN</button>
                    </div>
                </div>
                <div class="col_md_sign_up">
                    <div class="cont_ba_opcitiy">
                        <h2>SIGN UP</h2>
                        <p>Sign up for a new account</p>
                        <button class="btn_sign_up" onClick="cambiar_sign_up()">SIGN UP</button>
                    </div>
                </div>
            </div>
            <div class="cont_back_info">
                <div class="cont_img_back_grey"><img src="img/po.jpg" alt=""/></div>
            </div>
            <div class="cont_forms">
                <div class="cont_img_back_"><img src="img/po.jpg" alt=""/></div>
                <div class="cont_form_login"><a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
                    <h2>LOGIN</h2>
                    <input type="text" id="l_username" placeholder="请输入用户名"/>
                    <input type="password" id="l_password" placeholder="请输入密码"/>
                    <button class="btn_login" id="login">LOGIN</button>
                    <button class="btn_login">忘记密码</button>
                </div>
                <div class="cont_form_sign_up"><a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
                    <h2>SIGN UP</h2>
                    <input type="text" id="r_username" placeholder="请输入用户名"/>
                    <input type="password" id="r_password" placeholder="请输入密码"/>
                    <input type="password" id="password-confirm" placeholder="请再次输入密码"/>
                    <input type="text" id="phone" placeholder="请输入手机号"/>
                    <input type="text" id="email" placeholder="请输入邮箱"/>
                    <input type="text" id="question" placeholder="请输入密码提示问题"/>
                    <input type="text" id="answer" placeholder="请输入密码提示问题答案"/>
                    <button class="btn_sign_up" id="register">SIGN UP</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        alert("success");
        $("#login").click(function () {
            var l_username = $("#l_username").val();
            var l_password = $("#l_password").val();

            if (l_username == "" || l_password == "") {
                alert("用户名和密码不能为空！");
                return false;
            } else {
                $("#login").load("/user/login", {username: l_username, password: l_password}, function (data) {
                    alert(data);
                    alert("测试");
                });
            }

        })

        $("#register").click(function () {
            alert("register");
            var username = $("#r_username").val();
            var password = $("#r_password").val();
            var phone = $("#phone").val();
            var email = $("#email").val();
            var question = $("#question").val();
            var answer = $("#answer").val();

            alert(username);

            $.load("/user/register",
                {
                    username: username,
                    password: password,
                    phone: phone,
                    email: email,
                    question: question,
                    answer: answer
                },
                function (data, status) {
                    alert("Data: " + data + "  nStatus: " + status);
                }
            );
        })

    })

</script>
</body>
</html>
